<template>
  <div>
    <div v-for="(item, index) in allType.slice(0,3)" :key="index">
      <el-card
        v-if="item.children[index]"
        style="text-align: left"
        class="box-card"
      >
        <div id="recommend">
          <div style="font-size: 30px">
            {{ item.shopTypeName }}
          </div>
          <table>
            <tr>
              <td style="vertical-align: top">
                <div id="commodity">
                  <el-card
                    v-for="(commodity, index) in item.children.slice(0,6)"
                    :key="index"
                    class="commodity-card2"
                    style="margin-left: 10px"
                  >
                    <div>
                      <el-image
                        @click="
                          getIndexAndComName(
                            commodity.id,
                            commodity.commodityName
                          );
                          goDetails();
                        "
                        id="commodity-image"
                        style="width: 150px; height: 150px"
                        :src="`${commodity.imgpath}`"
                        fit="cover"
                      ></el-image>
                      <div class="colour-bar2">就爱商城</div>
                      <div class="commodity-info2">
                        <div style="height: 45px">
                          <span
                            @click="
                              getIndexAndComName(
                                commodity.id,
                                commodity.commodityName
                              );
                              goDetails();
                            "
                            id="commodity-name"
                            >{{ commodity.commodityName }}</span
                          >
                        </div>
                        <div>
                          <span
                            @click="
                              getIndexAndComName(
                                commodity.id,
                                commodity.commodityName
                              );
                              goDetails();
                            "
                            id="commodity-current-price"
                            >￥{{ commodity.commodityCurrentPrice }}</span
                          >
                        </div>
                      </div>
                    </div>
                  </el-card>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getCommodity, getShopType } from "../../../api/Commodity";
export default {
  data() {
    return {
      // url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      // url : "http://localhost:5000/132738091215263822.jpg",
      url: "",
      tableData: [],
      index: 0,
      name: "",

      allType: [],
    };
  },
  props: {
    getQueryData: [],
  },
  watch: {
    getQueryData: function () {
      console.log(this.getQueryData);
      this.allType = this.getQueryData;
    },
  },
  methods: {
    // getimg() {
    //   getCommodityImg()
    //     .then((data) => {
    //       var res = data.data.data;
    //       res.forEach((item) => {
    //         var line = item.imgPath.indexOf("files") + 6;
    //         item.imgPath = "http://localhost:5000/" + item.imgPath.slice(line);
    //       });

    //       console.log(res);
    //       this.tableData = res;
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },

    fetch() {
      // getCommodity()
      //   .then((data) => {
      //     var res = data.data.data;
      //     res.forEach((item) => {
      //       var line = item.imgpath.indexOf("files") + 6;

      //       item.imgpath = "http://localhost:5000/" + item.imgpath.slice(line);
      //       // console.log(item.imgpath);
      //     });
      //     this.url = res[0].imgpath;
      //     this.tableData = res;
      //     console.log(res);

      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });
      getShopType()
        .then((data) => {
          let res = data.data.data;

          // 将父节点类型传入commodityType数组
          res.forEach((item) => {
            if (item.superiorShopTypeId !== 0) {
              this.allType.push(item);
            }
          });
          console.log(this.allType);
          // 将子节点类型传入父节点的children数组
          res.forEach((child) => {
            this.allType.forEach((father) => {
              if (child.superiorShopTypeId === father.id) {
                father.children.push(child);
              }
            });
          });

          // 将商品传入对应父节点的children数组
          getCommodity()
            .then((data) => {
              let commodity = data.data.data;
              // console.log(commodity);
              res.forEach((child) => {
                commodity.forEach((commodity) => {
                  if (child.id === commodity.shopTypeId) {
                    // 获取到图片文件夹的绝对路径的字符数（+6是因为有5个分隔符并且下标从0开始）
                    var line = commodity.imgpath.indexOf("files") + 6;

                    // 在原先的绝对路径中用slice截取后与服务器的端口拼接起来
                    commodity.imgpath =
                      "http://localhost:5000/" + commodity.imgpath.slice(line);
                    child.children.push(commodity);
                  }
                });
              });
            })

            .catch((err) => {
              console.log(err);
            });
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getIndexAndComName(id, name) {
      this.index = id;
      this.name = name;

      console.log(this.index);
      console.log(this.name);
    },

    goDetails() {
      this.$router.push({
        path: "/commoditydetails",
        query: {
          id: this.index,
          name: this.name,
        },
      });
    },
  },
  mounted() {
    this.fetch();
  },
};
</script>

<style scoped>
/* 推荐卡片的样式 */
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
  min-height: 500px;
  height: 100%;
}

/* 商品卡片中的彩条样式 */
.colour-bar {
  text-align: left;
  background-color: red;
  color: white;
  padding: 5px;
}
.colour-bar2 {
  font-size: 10px;
  text-align: left;
  background-color: red;
  color: white;
  padding: 5px;
}

/* 商品卡片中的商品信息样式 */
.commodity-info {
  margin-top: 45px;
  font-size: 25px;
}
.commodity-info2 {
  margin-top: 5px;
  font-size: 15px;
}

#commodity-name:hover,
#commodity-current-price:hover {
  color: orange;
  border-bottom: 3px solid sandybrown;
  cursor: pointer;
}

#recommend {
  padding: 0 150px;
}

#commodity {
  display: flex;
  flex-wrap: wrap;
}

.el-image {
  cursor: pointer;
}

/* 商品卡片的样式 */
.commodity-card {
  width: 350px;
  height: 580px;
  margin-top: 20px;
  text-align: center;
}
.commodity-card2 {
  width: 200px;
  height: 280px;
  margin-top: 20px;
  text-align: center;
}

/* 伪元素（用于清除浮动） */
/* .recommend::after{
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
.recommend{
    *zoom: 1;  
} */
</style>